<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui_font.css" />
    <link rel="stylesheet" type="text/css" href="../../css/news.css" />
    <link rel="stylesheet" type="text/css" href="../../css/frame3.css" />
    <style>
        html,
        body {
            background-color: #f5f5f5;
            padding-bottom: 30px;
        }
        .panel{
            background-color: #ffffff;
        }
       
       .info{
           padding: 13px 20px 13px 20px;
           display: flex;
           justify-content: flex-start;
       }
       .info .avatar{
           width: 43px;
           border-radius: 100px;
       }
       .info .msg{
           color: #666666;
           font-size: 16px;
            margin-left: 10px;
       }
       .sam{
        font-size: 11px;
            margin-left: 10px;
       }
       .wenzi{
           color: #999;
           font-size: 11px;
       }
       .tequan{
            display: flex;
           justify-content: flex-start;
           flex-wrap: wrap;
           text-align: center;
       }
       .quan{
           width: 33%;
           margin-bottom: 10px;
       }
.lays{
    display: flex;
           justify-content: space-between;
           text-align: center;
           background-color: #3a3233;
           border-radius: 5px;
           padding: 13px 10px;
           margin: 10px;
}
.layl{
    display: flex;
           justify-content: flex-start;
           text-align: center;
}
      .ti{
          color: #D5BBC2;
          font-size: 14px;
          margin-left: 5px;
      }
      .kaibtn{
          color: #3B3233;
          font-size: 12px;
          background-color: #f2dbe0;
          padding: 0 12px;
          border-radius: 100px;
      }
    .card-box{
        padding: 0 10px 5px 10px;
        display: flex;
        justify-content: space-between;
    }
    .card1{
        width: 49%;
        height: 59px;
        background: url('../../image/zhibo/l1.png') 0 0 no-repeat;
        background-size: contain;
        padding-top: 13px;
    }
    .card2{
        width: 49%;
        height: 59px;
        background: url('../../image/zhibo/l2.png') 0 0 no-repeat;
        background-size: contain;
        padding-top: 13px;
    }
    .card1 p, .card2 p{
        color: #fff;
        font-size: 11px;
        margin-left: 10px;
       
    }
    .tip{
           background-color: #fff;
           border-radius: 5px;
           margin: 10px;
           padding: 10px;
       }
       .wenzit{
           color: #666;
           margin-top: 2px;
           font-size: 12px;
       }
       .tequant{
            display: flex;
           justify-content: flex-start;
           flex-wrap: wrap;
           text-align: center;
           align-items: center;
       }
       .quant{
           width: 25%;
           margin-bottom: 10px;
       }
       .one{
             display: flex;
           justify-content: flex-start;
           padding-top: 15px;
       }
       .ic{
           width: 22px;
           height: 22px;
           margin: 0 5px;
       }
       .right{
           flex: 1;
           border-bottom: 1px solid #DADADA;
           margin-left: 8px;
           padding: 0 0 15px 0;
           display: flex;
           justify-content: space-between;
           align-items: center;
       }
       .one:last-child .right{
           border-bottom: none;
       }
       .subtitle{
           color: #333;
           font-size: 14px;
       }
       .zuo{
           width: 15px;
           height: 15px;
       }
       .righly{
           color: #7d7d7d;
           font-size: 10px;
           display: flex;
           justify-content: flex-start;
           align-items: center;
       }
       .tabbar{
           position: fixed;
           left: 0;
           bottom: 0;
           width: 100%;
           padding: 5px 0 10px 0;
           background-color: #FAF8FB;
           display: flex;
           justify-content: space-around;
           align-items: center;
       }
       .tab{
           
            display: flex;
           flex-direction: column;
           align-items: center;
       }
       .tab img{
           width: 20px;
           margin-bottom: 5px;
       }
       .tab span{
            color: #999999;
           font-size: 10px;
       }
       .on span{
           color: #C087F3;
       }
    </style>
</head>

<body>
    <div id="view" v-cloak>
       <div class="panel"> 
    
           <div class="info">
            <img src="../../image/zhibo/avatar.png" class="avatar"/>   
               <div>
                   <div class="msg">hhhah</div>
                   <div class="sam">广东 · 广州 · 女 · 22</div>
               </div> 
           </div>
           <div class="tequan">
                <div class="quan">
                    <p class="wenzi">1</p>
                    <p class="wenzi">好友</p>
                </div>
                <div class="quan">
                    <p class="wenzi">2</p>
                    <p class="wenzi">关注</p>
                </div>
                <div class="quan">
                    <p class="wenzi">12</p>
                    <p class="wenzi">粉丝</p>
                </div>
            </div>
            <div class="lays">
                <div class="layl">
                    <img src="../../image/zhibo/guan.png" class="guan">
                    <span class="ti">专属折扣，轻松聊天</span>
                </div>
                <button class="kaibtn">开通皇冠</button>
            </div>
            <div class="card-box">
                <div class="card1">
                    <p>0</p>
                    <p>钱包</p>
                </div>
                <div class="card2">
                    <p>金币充值</p>
                    <p>限时特惠</p>
                </div>
            </div>
        </div>
        <div class="tip">
            <div class="tequant">
                <div class="quant">
                    <img src="../../image/zhibo/m3.png" alt="">
                    <p class="wenzit">我的认证</p>
                </div>
                <div class="quant">
                    <img src="../../image/zhibo/m3.png" alt="">
                    <p class="wenzit">谁看过我</p>
                </div>
                <div class="quant">
                    <img src="../../image/zhibo/m3.png" alt="">
                    <p class="wenzit">收益</p>
                </div>
                <div class="quant">
                    <img src="../../image/zhibo/m4.png" alt="">
                    <p class="wenzit">我的动态</p>
                </div>
            </div>
        </div>
        <div class="tip">
            <div class="one">
                <img src="../../image/zhibo/h1.png" class="ic">
                <div class="right">
                    <div class="subtitle">SVIP会员</div>
                    <img src="../../image/zhibo/zuo.png" class="zuo">
                </div>
            </div>
            <div class="one">
                <img src="../../image/zhibo/h1.png" class="ic">
                <div class="right">
                    <div class="subtitle">每日任务</div>
                    <div class="righly">
                        <div>上传头像</div>
                        <img src="../../image/zhibo/zuo.png" class="zuo">
                    </div>
                </div>
            </div>
            <div class="one">
                <img src="../../image/zhibo/h3.png" class="ic">
                <div class="right">
                    <div class="subtitle">我的视频</div>
                    <img src="../../image/zhibo/zuo.png" class="zuo">
                </div>
            </div>
            <div class="one">
                <img src="../../image/zhibo/h1.png" class="ic">
                <div class="right">
                    <div class="subtitle">帮助中心</div>
                    <img src="../../image/zhibo/zuo.png" class="zuo">
                </div>
            </div>
            <div class="one">
                <img src="../../image/zhibo/h1.png" class="ic">
                <div class="right">
                    <div class="subtitle">投诉与建议</div>
                    <img src="../../image/zhibo/zuo.png" class="zuo">
                </div>
            </div>
           
        </div>
        <div class="tabbar">
            <div class="tab">
                <img src="../../image/zhibo/m3.png" />
                <span>缘分</span>
            </div>
            <div class="tab">
                <img src="../../image/zhibo/m3.png" />
                <span>动态</span>
            </div>
            <div class="tab">
                <img src="../../image/zhibo/m3.png" />
                <span>聊天</span>
            </div>
            <div class="tab on">
                <img src="../../image/zhibo/m3.png" />
                <span>我</span>
            </div>
        </div>
     </div>
    <script type="text/javascript" src="../../script/api.js"></script>
    <script type="text/javascript" src="../../script/jquery.js"></script>
    <script type="text/javascript" src="../../script/ffkj.js"></script>
    <script type="text/javascript" src="../../script/vue.js"></script>
    <script type="text/javascript" src="../../script/update.js"></script>
    <script type="text/javascript">
        var view = new Vue({
            el: '#view',
            data: {
                ffInfo: {},
                ios: 1, // 1上架 0非上架
                version: '0.0.1'
            },
            created(){
                var dialogBox = api.require('dialogBox');
dialogBox.actionMenu ({
    rect:{
        h: 150
    },
    texts:{
         cancel: '取消'
    },
    items:[
    {
        text: '微信',
        icon: 'widget://image/icon/weixin_icon.png'
    },
    {
        text: 'QQ',
        icon: 'widget://image/icon/qq_icon.png'
    },
    {
        text: '微博',
        icon: 'widget://image/icon/weibo_icon.png'
    },
    {
        text: '短信',
        icon: 'widget://image/icon/shortmessage_icon.png'
    }
    ],
    styles:{
        bg:'#FFF',
        column: 3,
        itemText: {
            color: '#000',
            size: 12,
            marginT:8
        },
        itemIcon:{
            size:80
        },
        cancel:{  
            bg: 'fs://icon.png',   
            color:'#000',          
            h: 44 ,                 
            size: 14       
        }
    }
}, function(ret){
    alert(JSON.stringify(ret));
});
            },
            methods: {
                _url(param, url) {
                    _url(param, url);
                },
                // 返回图片路径
                returnImg(url) {
                    return returnImg(url);
                },
            }
        })
        // apiready = function() {
        //     view.ios = $api.getStorage('shang');
        //     //APP版本
        //     view.version = api.appVersion
        // }

        // function callservice(v) {
        //     api.call({
        //         type: 'tel_prompt',
        //         number: v
        //     });
        // }
    </script>
</body>

</html>